<template>
  <div class="signUp">
    <h3>各类报名</h3>
    <div class="content">
      <ul>
        <li v-for="item in signList" :key="item.id">
          <RouterLink
            class="component"
            :to="{
              path: `/${item.way}`,
              query: { title: item.title },
            }"
          >
            <Sign>
              {{ item.title }}
            </Sign>
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts" name="SignUp">
import Sign from "./Sign.vue";
import { RouterLink } from "vue-router";
import { ref } from "vue";

let signList = ref([
  {
    id: "abc001",
    title: "CET报名",
    way: "cet",
  },
  {
    id: "abc002",
    title: "省计算机报名",
    way: "computer",
  },
  {
    id: "abc003",
    title: "各类讲座",
    way: "lectures",
  },
  {
    id: "abc004",
    title: "第二学士学位",
    way: "professor",
  },
  {
    id: "abc005",
    title: "实验班报名",
    way: "lab",
  },
]);
</script>

<style scoped>
.signUp {
  background-color: rgb(223, 250, 250);
  box-shadow: 0 0 10px;
  border-radius: 10px;
}
.content {
  display: flex;
  justify-content: space-evenly;
}
.content ul {
  display: flex;
  flex-direction: row;
}
.content li {
  list-style-type: none;
}
.component {
  text-decoration: none;
}
</style>